<%--
  Created by IntelliJ IDEA.
  User: XYC
  Date: 2015/7/27
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- jstl 标签 --%>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>

<link href="${css}/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- DataTables CSS -->
<link href="${css}/dataTables.bootstrap.css" rel="stylesheet">
<link href="${css}/bootstrap-datetimepicker.min.css"  rel="stylesheet" media="screen">
<!-- DataTables Responsive CSS -->
<link href="${css}/dataTables.responsive.css" rel="stylesheet">
<!-- button -->
<link rel="stylesheet" type="text/css" href="${assets}/button/css/btn.css"/>
<link href="${dean}/css/past.css" rel="stylesheet">
<html>
<style type="text/css">
    .form-group{
        height: 34px;
        vertical-align: middle;
        /*align*/
    }
    .form-group .control-label{
        margin-top:5px;
    }
    .displayData{
        display: none;
    }
</style>
<head>
    <title></title>
</head>
<body>
<div class="past">
    <div class="disease">
        <table>
            <tr>
                <th>疾病</th>
                <th colspan="2" class="butn">
                    <button type="button">新增</button>
                </th>
            </tr>
            <tr>
                <td>疾病名称</td>
                <td>确诊时间</td>
                <td>操作</td>
            </tr>

        </table>
    </div>
    <div class="surgery">
        <table>
            <tr>
                <th>疾病</th>
                <th colspan="2" class="butn">
                    <button type="button">新增</button>
                </th>
            </tr>
            <tr>
                <td>疾病名称</td>
                <td>确诊时间</td>
                <td>操作</td>
            </tr>

        </table>
    </div>
    <div class="cl"></div>
    <div class="Trauma">
        <table>
            <tr>
                <th>疾病</th>
                <th colspan="2" class="butn">
                    <button type="button">新增</button>
                </th>
            </tr>
            <tr>
                <td>疾病名称</td>
                <td>确诊时间</td>
                <td>操作</td>
            </tr>

        </table>
    </div>
    <div class="transfusion">
        <table>
            <tr>
                <th>疾病</th>
                <th colspan="2" class="butn">
                    <button type="button">新增</button>
                </th>
            </tr>
            <tr>
                <td>疾病名称</td>
                <td>确诊时间</td>
                <td>操作</td>
            </tr>

        </table>
    </div>
    <div class="cl"></div>
    <div class="store">
        <button>保存</button>
    </div>
</div>
<div class="panel-body">
    <div class="dataTable_wrapper">
        <table id="example" class="table table-striped table-bordered table-hover" width="100%">
            <thead>
            <tr align="left">
                <th><input id="all_id" type="checkbox"></th>
                <th>过敏史种类</th>
                <th>过敏原</th>
                <th>发病时间</th>
                <th>发病原因</th>
                <th>治疗描述</th>
                <th>id值</th>
                <th style="display: none">id值</th>
                <%--<th>操作</th>--%>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<!-- 新增 -->
<div class="modal fade" id="addModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                <h4 class="modal-title">过敏史新增</h4>
            </div>
            <div class="modal-body">
                <%--<iframe id="addIframe" name="addIframe" width="100%" height="100%" frameborder="0"></iframe>--%>
                <div class="form-group">
                    <label class="col-sm-4 control-label">过敏史种类</label>
                    <div class="col-sm-8">
                        <select id="allergic" class="form-control">
                            <%--<option value=""></option>--%>
                            <c:forEach items="${allergichis}" var="BaseDictListDate">
                                <option value="${BaseDictListDate.code}" text="${BaseDictListDate.name}">${BaseDictListDate.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">过敏原</label>
                    <div class="col-sm-8">
                        <select id="allergen" class="form-control">
                            <%--<option value=""></option>--%>
                            <c:forEach items="${allergen}" var="BaseDictListDate">
                                <option value="${BaseDictListDate.code}" text="${BaseDictListDate.name}">${BaseDictListDate.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">发病时间</label>
                    <div class="col-sm-8">
                        <div id="onSetTime" class="input-group date form_date col-md-5" style="width: auto"  data-date-format="yyyy-mm-dd">
                            <input class="form-control" size="12" type="text" value="" readonly>
                            <span class="input-group-addon">
                                <!-- <span><img src="img/calender.png" alt="" /></span> -->
                                 <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">发病原因</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" id="diseaseCause" name="diseaseCause"
                               placeholder="请输入发病原因">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-4 control-label">治疗描述</label>
                    <div class="col-sm-8">
                        <input type="email" class="form-control" id="treatmentDescription" name="treatmentDescription"
                               placeholder="请输入治疗描述">
                    </div>
                </div>
               <%-- <div class="form-group">
                    <label class="col-sm-2 control-label">过敏原</label>
                    <div class="col-sm-3">
                        <select id="allergen" class="form-control">
                            <option value=""></option>
                            &lt;%&ndash;<c:forEach items="${allergen}" var="BaseDictListDate">&ndash;%&gt;
                                &lt;%&ndash;<option value="${BaseDictListDate.code}">${BaseDictListDate.name}</option>&ndash;%&gt;
                            &lt;%&ndash;</c:forEach>&ndash;%&gt;
                        </select>
                    </div>
                </div>--%>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_add" >保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改 -->
<div class="modal fade" id="updateModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
                <h4 class="modal-title">过敏史修改</h4>
            </div>
            <div class="modal-body">
                <iframe id="updateIframe" name="updateIframe" width="100%" height="100%" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_update">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="${js}/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>
<!-- DataTables JavaScript -->
<script src="${js}/jquery.dataTables.js"></script>
<script src="${js}/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="${js}/bootstrap-dateTime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="${js}/bootstrap-dateTime/locales/bootstrap-datetimepicker.zh-CNxyc.js" ></script>
<script src="${js}/bootbox.js"></script>
<!-- button -->
<script src="${assets}/button/js/btn.js"></script>
<script type="text/javascript">
    var table;
    var buttonType;
    var selectedRow;
    var idCardData ;
    var idData;
    function initDateTime(){
        $("#onSetTime").datetimepicker({
            language:  'zh-CN',
            weekStart:  0,
            todayBtn: true,
            autoclose:  1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    }

    function initTable() {
        table = $("#example").DataTable({
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            "bFilter": false,//去掉搜索框
            "bAutoWidth": true, //自适应宽度
            "sPaginationType": "full_numbers",
//                "bDestroy" : true,
//              "asStripeClasses": [ 'strip1', 'strip2', 'strip3' ],//设置斑马条（奇偶行）的css class
            "ordering": false,//是否允许Datatables开启排序
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "${ctx}/web/patient/allergicHistory/ShaoData?idCard=${idCard}",
            "sAjaxDataProp": "dataList",//查询后，返回的集合
            "fnServerData": function (sSource, aoData, fnCallback) {  //查询条件  用来自定义函数
                aoData.push(
                        {"name": "hospName", "value": $("#hospName").val()}
                );
                $.ajax({
                    "dataType": 'json',
                    "url": sSource,
                    "type": 'post',
                    "data": aoData,
                    "success": fnCallback
                });

            },
            "aoColumns": [
                {
                    "targets": -1,
                    "data": null,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html('' +
                        '&nbsp;&nbsp;<input name="id" value="' + oData.id + '" type="checkbox" onClick="isCheckedAll()">' +
                        '');
                    }
                }, {
                    "mDataProp": "allergicName",
                    "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
                    'sClass': "text-center"
                }, {
                    "mDataProp": "allergenName",
                    "sDefaultContent" : ""
                }, {
                    "mDataProp": "onSetTimeOfString",
                    "sDefaultContent" : ""
                }, {
                    "mDataProp": "diseaseCause",
                    "sDefaultContent" : ""
                },{
                    "mDataProp": "treatmentDescription",
                    "sDefaultContent" : ""
                },{
                    "mDataProp": "id",
                    "sDefaultContent" : "",
                    "visible":false
//
                },{
                    "mDataProp": "id",
                    "sDefaultContent" : "",
                    "className":"displayData"
                }
    //                    ,{
    //                        "targets": 5,
    //                        "data": null,
    //                        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
    //                            $(nTd).html('' +
    //                                    '<button type="button" id="update_butt" class="btn btn-outline btn-primary" >修改</button>&nbsp;&nbsp;&nbsp;&nbsp;' +
    //                                    '<button type="button" id="delete_butt" class="btn btn-outline btn-danger">删除</button>' +
    //                                    '');
    //                        }
    //                    }
            ],
            "oLanguage": {
                "sProcessing": "正在加载中......",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "没有数据！",
                "sEmptyTable": "无数据存在！",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoEmpty": "显示0到0条记录",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                //"sSearch" : "搜索", 全局搜索字段
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            },
            initComplete: function () {
                $("#mytool").append('<button id="delete_butt" type="button" class="btn btn-outline btn-success" style="float:right;">删除</button>');
                $("#mytool").append('<button id="update_butt" type="button" class="btn btn-outline btn-success" style="float:right;">修改</button>');
                $("#mytool").append('<button id="add_butt" type="button" class="btn btn-outline btn-success" style="float:right;">新增</button>');
                $("#add_butt").on("click", toAdd);
                $("#update_butt").on("click", toUpdate);
                $("#delete_butt").on("click", toDelete);
            }
        });


        //修改
//            $('#example tbody').on( 'click', '#update_butt', function (e) {
//                var rowData = table.row( $(this).parents('tr') ).data();
//                $("#updateIframe").attr("src", '/hosp/toUpdate?id=' +rowData.id);//修改地址
//                $('#updateModal').modal({ show: true, backdrop: 'static' });
//                var width = 800;
//                var height = 920;
//                var mycss={"width":width+"px","height":height+"px","top":(($(window).height()-height)/2>0?($(window).height()-height)/2:0)+"px"};
//                $('#updateModal .modal-dialog').css(mycss).find('.modal-content').css({height: '100%',width: '100%'}).find('.modal-body').css({height: '88%' });
//            });

    }

    //新增
    function toAdd() {

        $("#addModal .modal-title").html("过敏史新增");
        <%--$("#addIframe").attr("src", "${URL_ADM_HOSP_TOADD}");//新增地址--%>
        $('#addModal').modal({show: true, backdrop: 'static'});
        buttonType = "add";
        $("#addModal input").prop('value','');
        $("#addModal select").prop('value','');
        var width = 350;
        var height = 400;
        var mycss = {
            "width": width + "px",
            "height": height + "px",
            "top": (($(window).height() - height) / 2 > 0 ? ($(window).height() - height) / 2 : 0) + "px"
        };
        $('#addModal .modal-dialog').css(mycss).find('.modal-content').css({
            height: '100%',
            width: '100%'
        }).find('.modal-body').css({height: '70%'});
    }

    //修改
    function toUpdate() {
        $("#addModal .modal-title").html("过敏史修改");
        var checkedArray = getCheckedArray();
        if (checkedArray.length != 1) {
            bootbox.dialog({
                message: "请选中一项数据",
                buttons: {
                    OK: {
                        label: "确定",
                        className: "btn-primary"
                    }
                }
            });
            return false;
        }
        <%--$("#updateIframe").attr("src", '${URL_ADM_HOSP_TOUPDATE}?id=' + checkedArray[0]);//修改地址--%>
        $('#addModal').modal({show: true, backdrop: 'static'})
        buttonType = "edit";
        $("#addModal input").prop('value','');
        $("#addModal select").prop('value','');
        var rowData=$("input[name='id'][value='"+checkedArray[0]+"']").parents('tr').find('td');
//        alert(rowData[1].textContent);
        $("#allergic option[text="+rowData[1].textContent+"]").prop("selected", true);
        $("#allergen option[text="+rowData[2].textContent+"]").prop("selected", true);
        $("#onSetTime input").val(rowData[3].textContent);
        $("#diseaseCause").val(rowData[4].textContent);
        $("#treatmentDescription").val(rowData[5].textContent);
        idData=checkedArray[0];
        var width = 350;
        var height = 400;
        var mycss = {
            "width": width + "px",
            "height": height + "px",
            "top": (($(window).height() - height) / 2 > 0 ? ($(window).height() - height) / 2 : 0) + "px"
        };
        $('#addModal .modal-dialog').css(mycss).find('.modal-content').css({
            height: '100%',
            width: '100%'
        }).find('.modal-body').css({height: '70%'});

    }

    //删除
    function toDelete() {
        var checkedArray = getCheckedArray();
        var ids = "";
        if (checkedArray.length == 0) {
            bootbox.dialog({
                message: "请选中至少一项数据",
                buttons: {
                    OK: {
                        label: "确定",
                        className: "btn-primary"
                    }
                }
            });
            return false;
        } else {
            for (var i = 0; i < checkedArray.length; i++) {
                ids += checkedArray[i] + "-";
            }
            ids = ids.substring(0, ids.length - 1);
        }
        var data=new Object();
        data["opp"]="del";
        data["idData"]=ids;
        bootbox.dialog({
//                message: "医院："+rowData.hospName,
//                title: "确定删除此项？",
            message: "确定删除此项？",
            buttons: {
                OK: {
                    label: "确定",
                    className: "btn-primary",
                    callback: function () {
                        $.ajax({
                            url :'${ctx}/web/patient/allergicHistory/SaveData',//删除地址
                            type: 'post',
                            data: data,
                            async: false, //默认为true 异步
                            error: function () {
                                alert('error');
                            },
                            success: function (data) {
                                refreshTable();
                            }
                        });
                    }
                },
                Cancel: {
                    label: "取消",
                    className: "btn-default"
                }
            }
        });
    }

    //多选按钮
    $("#all_id").click(function () {
        if (this.checked) {
            $("input[name='id']").each(function () {
                $(this)[0].checked = true;
            });
        } else {
            $("input[name='id']").each(function () {
                $(this)[0].checked = false;
            });
        }
    });

    //判断是否已经全选
    function isCheckedAll() {
        var isCheckAll = true;
        $("input[name='id']").each(function () {
            if (!this.checked) {
                isCheckAll = false;
            }
        });
        if (isCheckAll) {
            $("#all_id")[0].checked = true;
        } else {
            $("#all_id")[0].checked = false;
        }
    }

    function getCheckedArray() {
        var checkedArray = [];
        $("input[name='id']").each(function () {
            if (this.checked) {
                checkedArray.push(this.value);
            }
        });
        return checkedArray;
    }

    //新增提交  调用子级页面新增方法
    $("#submit_add").click(function () {
        var data=new Object();
        data["allergic"]=$("#allergic").val();
        data["allergen"]=$("#allergen").val();
        data["onSetTimeOfString"]=$("#onSetTime input").val();
        data["diseaseCause"]=$("#diseaseCause").val();
        data["treatmentDescription"]=$("#treatmentDescription").val();
        data["opp"]=buttonType;
        if(buttonType=="edit"){
            data["id"]=idData;
        }
        data["idCard"]= idCardData
        jQuery.ajax({
            url :'${ctx}/web/patient/allergicHistory/SaveData',
            type : "post",
            data:data,
            cache : false,
            dataType : "json",
            success : function(data){
                alert("提交完成");
                $('#addModal').modal('hide');
                refreshTable();
            }
        });
    });

    //修改提交  调用子级页面修改方法
    $("#submit_update").click(function () {
//        $("#addModal .modal-title").html("过敏史修改");
        document.getElementById('updateIframe').contentWindow.doUpdate();
    });

    //关闭弹出框
    function closeModal(flag) {
        $('#' + flag + "Modal").modal('hide');
        refreshTable();
    }

    //查询
    $("#query").click(function () {
        refreshTable();
    });

    //刷新table数据
    function refreshTable() {
        table.ajax.reload();
        //重置全选按钮
        $("#all_id")[0].checked = false;
    }

    $(document).ready(function () {
        <%--var idcard_value = ${idCard}.toString();--%>
        <%--alert(typeof ${idCard});--%>
        <%--alert(${idCard});--%>
        idCardData= '${idCard}';
        initTable();
        initDateTime();
    });


</script>
</body>
</html>
